<!--  -->
<template>
    <div class="model" v-show="isShow">
        <div class="mask"></div>
        <div class="layui-layer layui-layer-page " :class="{'active': isShow}">
          <div class="layui-layer-title">签到说明
            <i class="layui-icon layui-icon-close" @click="close">X</i>
          </div>
          <div class="layui-layer-content">
            <div class="layui-text">
              <blockquote class="layui-element-quote">"签到"可获得的社区积分，规则如下</blockquote>
              <table class="layui-table">
                <thead>
                  <tr>
                    <th>连续签到天数</th>
                    <th>每天获得的积分</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>&lt;5</td>
                  <td>5</td>
                  </tr>
                  <tr>
                    <td>&ge;10</td>
                  <td>10</td>
                  </tr>
                  <tr>
                    <td>&ge;15</td>
                  <td>10</td>
                  </tr>
                  <tr>
                    <td>&ge;20</td>
                  <td>10</td>
                  </tr>
                </tbody>
              </table>
              <p>中间若有不连续积分清零</p>
              <p  class="orange">不能使用外挂</p>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
 name: 'signifo', 
 components: {},
 props:{
        isShow:{
            default: false,
            type: Boolean
        }
      },
 data () {
  return {
  };
 },
 computed: {},

 mounted () {},

 methods: {
   close(){
     this.$emit('closeModel')
   }
 }
}

</script>
<style scoped lang='scss' >
  @keyframes bounceIn {
      0%{
        opacity: 0;
        transform: scale(0.5);
      }
      100%{
        opacity: 1;
        transform: scale(1);
      }
    }
    .mask{
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 10000;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  .layui-layer{
    position: fixed;
    width: 300px;
    height: 480px;
    top: 50%;
    left: 50%;
    margin-top: -240px;
    margin-left: -150px;
    background: #ffff;
    z-index: 10100;
    &.active{
      animation-fill-mode: both;
      animation: bounceIn,0.2s;
    }
  }
  .layui-layer-title{
    height: 42px;
    padding-left: 20px;
    line-height: 42px;
    color: #333;
    padding-right: 10px;
    background-color: #f8f8f8;
  }
  .layui-layer-content{
    padding:  20px;
  }
  .layui-icon{
    cursor: pointer;
    float: right;
  }
  .pic{
    width: 30px;
    height: 30px;
    border-radius: 2px;
    margin-right: 10px;
  }
  .layui-tab-item{
    line-height: 45px;
    li{
      border-bottom: 1px dotted #dcdcdc;
      &:last-child{
        border-bottom: none;
      }
    }
  }
  .layui-tab-content{
    padding: 0 10px;
  } 
</style>